<template>
  <div>
    <el-select
      v-model="form.province"
      placeholder="请选择"
      style="width:48%;margin-right:2%;"
      @change="onProvincesChange"
    >
      <el-option
        v-for="item in provinces"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
    <el-select
      v-model="form.city"
      placeholder="请选择"
      style="width:50%"
    >
      <el-option
        v-for="item in cityList"
        :key="item"
        :label="item"
        :value="item"
        @change="onCitysChange"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  name: 'city-picker',
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      cityList: []
    }
  },

  created () {

  },
  computed: {
    provinces
  },
  methods: {
    citys,
    // 城市发生变化
    onProvincesChange (val) {
      this.form.province = val
      this.form.city = null
      this.cityList = this.citys(val)
    },

    // 地区发生变化
    onCitysChange (val) {
      this.form.city = val
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
